<template>
	<view class="my_distribution_container">
		<view class="my_distribution_box">
			<!-- top -->
			<!-- 		<view class="distribution_top_box">
				<view class="distributor_num_box">
					<view class="distributor_num">
						{{ distributionObj.allNum }}
					</view>
					<view class="distributor_tip">
						分销总人数
					</view>
				</view>

				<view class="distributor_line"></view>

				<view class="distributor_add_num_box">
					<view class="distributor_add_num">
						{{ distributionObj.todayNum }}
					</view>
					<view class="distributor_add_tip">
						今日新增人数
					</view>
				</view>
			</view> -->

			<view class="distribution_middle_box" v-if="distributorList.length !== 0">
				<!-- tab -->
				<!-- <view class="middle_tab_box">
					<view class="middle_tab_all" v-for="item in middleTabList" :key="item.id"
						:class="[isActive == item.id ? 'middle_tab_all_active' : '']" @click="handlerTab(item)">
						{{ item.title }}({{ item.num }}人)
						<view class="tab_bottom"></view>
					</view>
				</view> -->

				<view class="middle_con_box">
					<view class="middle_con_all" v-for="(item, index) in distributorList" :key="index">
						<view class="left_box">
							<view class="" style="display: flex; align-items: center">
								<view class="left_avatar_box">
									<image :src="defaultAvatarNewImg" mode="" class="left_avatar"></image>
								</view>
								<view class="">
									<view class="left_title">
										{{ item.name ? item.name : '默认用户' }}
									</view>
									<view class="left_phone">
										{{ item.phone ? item.phone : '' }}
									</view>
								</view>
							</view>

							<view class="set_btn">
								<u-button
									type="primary"
									size="mini"
									:disabled="userInfoAgent == 1 && item.level !== 1"
									@click="setDistribution(item)"
									v-if="item.status == 0 || item.status == 1"
								>
									设置分成
								</u-button>
								<span style="color: red" v-else>已注销</span>
							</view>
						</view>
						<view class="right_box">
							<view class="create_time">
								加入时间
								<span style="font-family: my-font">{{ item.created_at }}</span>
							</view>
							<view class="create_level">
								<span v-if="item.level == 1" style="color: blue">高级分销员</span>
								<span v-else-if="item.level == 2" style="color: brown">中级分销员</span>
								<span v-else-if="item.level == 3" style="color: blueviolet">初级分销员</span>
							</view>
						</view>
					</view>
				</view>
				<!-- 设置分销比例弹窗 -->
				<u-popup v-model="showProportion" mode="center" width="680" border-radius="12" :closeable="true" close-icon-color="#000" @close="handleCloseProportion">
					<view class="popup_proportion_box">
						<view class="proportion_top">
							<!-- <view class="tab" :style="{ 'left' : proportionTopTic == '1' ? '65rpx' : '276rpx' }"></view> -->
							<view @click="topTabClick('1')" :class="{ proportion_top_tic: proportionTopTic == '1' }">设置分销比例</view>
							<view @click="topTabClick('2')" :class="{ proportion_top_tic: proportionTopTic == '2' }">设置设备抽成</view>
						</view>
						<view v-if="proportionTopTic == '1'">
							<view class="">
								<u-radio-group v-model="yjType" @change="handleChangeRadioGroup">
									<u-radio v-for="(item, index) in typeList" :key="item.id" :name="item.id" style="font-family: all-font">
										{{ item.name }}
									</u-radio>
								</u-radio-group>
							</view>
							<view class="proportion_input_all" v-if="yjType == 1">
								<!-- :onkeyup="(yjP = (yjP || '').replace(/[^A-z0-9]/, ''))" -->
								<u-input v-model="yjP" type="number" :border="true" placeholder="请输入分销比例(单位%)" placeholder-style="font-family: all-font;" />
							</view>

							<view class="proportion_input_all" v-else-if="yjType == 2">
								<!-- :onkeyup="(yjA = (yjA || '').replace(/[^A-z0-9]/, ''))" -->
								<u-input v-model="yjA" type="number" :border="true" placeholder="请输入分销金额(单位元)" placeholder-style="font-family: all-font;" />
							</view>
							<view class="sure_btn">
								<u-button type="primary" @click="sureProportion">确定</u-button>
							</view>
						</view>
						<view v-else>
							<view class="">
								<u-radio-group v-model="sbyjType">
									<u-radio v-for="(item, index) in sbtypeList" :key="item.id" :name="item.id" style="font-family: all-font">
										{{ item.name }}
									</u-radio>
								</u-radio-group>
							</view>
							<view class="proportion_input_all">
								<!-- :onkeyup="(yjP = (yjP || '').replace(/[^A-z0-9]/, ''))" -->
								<u-input v-model="iot_yj_p" type="number" :border="true" placeholder="请输入设备抽成比例(单位%)" placeholder-style="font-family: all-font;" />
							</view>
							<view class="sure_btn">
								<u-button type="primary" @click="sbSureProportion">确定</u-button>
							</view>
						</view>
					</view>
				</u-popup>
			</view>

			<view class="no_data" v-else>----- 暂无分销 -----</view>
		</view>
	</view>
</template>

<script>
import imageUrl from '@/utils/imgUrl.js';
export default {
	data() {
		return {
			defaultAvatarNewImg: 'https://file-1314054542.cos.ap-shanghai.myqcloud.com/cos_file/wechat_xcx/66836f2436eb7_1719889700.png',
			middleTabList: [
				{
					id: '0',
					title: '直接邀请'
				},
				{
					id: '1',
					title: '间接邀请'
				}
			],
			isActive: 0,
			distributorList: [],
			distributionObj: {
				todayNum: '', // 今日新增人数
				allNum: '' // 分销总人数
			},
			inviteObj: {
				directsNum: '', // 直接邀请人数
				indirectNum: '' // 间接邀请人数
			},
			urlImg: '',
			showProportion: false,
			proportionValue: '',
			detailObj: {},
			pageObj: {
				pageNow: 1,
				pageSize: 10
			},
			total: 0,
			typeList: [
				{
					id: 1,
					name: '分佣比例'
				},
				{
					id: 2,
					name: '分佣金额'
				}
			],
			yjType: '1',
			yjP: '',
			yjA: '',
			userInfoAgent: uni.getStorageSync('h5-isAgent'),
			proportionTopTic: '1',
			sbtypeList: [{ id: 1, name: '抽成比例' }],
			sbyjType: '1',
			iot_yj_p: ''
		};
	},
	onShow() {},
	onLoad() {
		this.urlImg = imageUrl;
		// this.getMySaler()
		if (this.pageObj.pageNow == this.total) {
			return;
		} else {
			this.getMyFxUser();
		}
	},
	onReachBottom() {
		if (this.pageObj.pageNow < this.total) {
			this.pageObj.pageNow++;
			this.getMyFxUser();
		} else if (this.pageObj.pageNow == this.total) {
			uni.showToast({
				title: '暂无更多数据',
				icon: 'none'
			});
			return;
		}
	},
	methods: {
		// 抽成方式切换
		topTabClick(val) {
			this.proportionTopTic = val;
		},
		// 选择分销类型
		handleChangeRadioGroup(e) {
			this.yjType = e;
		},

		// 设置分销比例接口
		updateFxUser() {
			this.$request(
				'/api/setFxuserYjType',
				{
					fxuser_id: this.detailObj.id,
					yj_p: this.yjP,
					yj_a: this.yjA,
					yj_type: this.yjType
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.showToast({
						title: '设置分销比例成功',
						icon: 'none',
						success: (res) => {
							setTimeout(() => {
								this.showProportion = false;
								this.distributorList = [];
								this.getMyFxUser();
							}, 1200);
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},
		// 设置设备抽成比例
		setFxuserIotYjType() {
			this.$request(
				'/api/setFxuserIotYjType',
				{
					fxuser_id: this.detailObj.id,
					iot_yj_type: 1,
					iot_yj_p: this.iot_yj_p
				},
				'POST'
			).then((res) => {
				if (res.code == 1) {
					uni.showToast({
						title: '设置设备抽成比例成功',
						icon: 'none',
						success: (res) => {
							setTimeout(() => {
								this.showProportion = false;
								this.proportionTopTic = '1';
								this.distributorList = [];
								this.getMyFxUser();
							}, 1200);
						}
					});
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		},

		// 关闭设置分销比例弹窗
		handleCloseProportion() {
			this.proportionValue = '';
			this.showProportion = false;
		},

		// 设置分销比例
		setDistribution(val) {
			this.iot_yj_p = val.iot_yj_p;
			this.detailObj = val;
			this.yjA = val.yj_a;
			this.yjP = val.yj_p;
			this.yjType = val.yj_type;
			this.showProportion = true;
		},

		// 设置分销比例确定
		sureProportion() {
			this.updateFxUser();
		},
		// 设置设备抽成比例
		sbSureProportion() {
			this.setFxuserIotYjType();
		},

		// 切换tab
		handlerTab(val) {
			this.isActive = val.id;
			// this.getMySaler()
		},

		// 获取分销接口
		getMyFxUser() {
			this.$request(
				'/api/getFxUserList',
				{
					// user_id: '12484',
					page_now: this.pageObj.pageNow,
					page_size: this.pageObj.pageSize
				},
				'GET'
			).then((res) => {
				if (res.code == 1) {
					res.data.forEach((item) => {
						this.distributorList.push(item);
					});

					this.total = res.page_info.page_count;
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					});
					return;
				}
			});
		}

		// getMySaler() {
		// 	this.$request('/api/myFxuserSelectFront', {
		// 		id: uni.getStorageSync('userInfo').id
		// 	}, 'GET').then(res => {
		// 		if (res.code == 1) {
		// 			this.distributionObj.allNum = res.allNum
		// 			this.distributionObj.todayNum = res.todayNum
		// 			this.middleTabList.forEach(item => {
		// 				if (item.id == 0) {
		// 					item.num = res.directs.length
		// 				} else if (item.id == 1) {
		// 					item.num = res.indirect.length
		// 				}
		// 			})

		// 			if (this.isActive == 0) {
		// 				this.distributorList = res.directs
		// 			} else if (this.isActive == 1) {
		// 				this.distributorList = res.indirect
		// 			}
		// 		} else {
		// 			uni.showToast({
		// 				title: res.msg,
		// 				icon: 'none'
		// 			})
		// 			return
		// 		}
		// 	})
		// },
	}
};
</script>

<style lang="scss" scoped>
.my_distribution_container {
	padding: 16rpx 20rpx 0;

	.my_distribution_box {
		.distribution_top_box {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 710rpx;
			height: 132rpx;
			border-radius: 8rpx;
			background: #ffffff;

			.distributor_num_box {
				.distributor_num {
					color: #333;
					font-size: 36rpx;
					text-align: center;
					font-family: my-font;
					padding-bottom: 6rpx;
				}

				.distributor_tip {
					color: #333;
					font-size: 24rpx;
				}
			}

			.distributor_line {
				width: 2rpx;
				height: 40rpx;
				border: 1px solid #d9d9d9;
				margin: 0 108rpx;
			}

			.distributor_add_num_box {
				.distributor_add_num {
					color: #333;
					font-size: 36rpx;
					text-align: center;
					font-family: my-font;
					padding-bottom: 6rpx;
				}

				.distributor_add_tip {
					color: #333;
					font-size: 24rpx;
				}
			}
		}

		.distribution_middle_box {
			width: 100%;
			border-radius: 8rpx;
			background: #ffffff;
			margin-top: 14rpx;
			padding: 34rpx 44rpx 0;

			.middle_tab_box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 26rpx 0 46rpx;
				margin-bottom: 14rpx;

				.middle_tab_all {
					font-size: 28rpx;
					font-weight: 400;
					color: #333;
					font-family: my-font;

					.tab_bottom {
						width: 36rpx;
						height: 6rpx;
						border-radius: 18rpx;
						background: transparent;
						margin-top: 16rpx;
					}
				}

				.middle_tab_all_active {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					color: #4f96ff;
					font-family: my-font;

					.tab_bottom {
						width: 36rpx;
						height: 6rpx;
						border-radius: 18rpx;
						background: #4f96ff;
						margin-top: 16rpx;
					}
				}
			}

			.middle_con_box {
				.middle_con_all {
					border-bottom: 1px solid #fafafa;
					padding: 0 0 36rpx;

					.left_box {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left_avatar_box {
							width: 68rpx;
							height: 68rpx;
							margin-right: 30rpx;

							.left_avatar {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.left_avatar_name_box {
							display: flex;
							align-items: center;
							justify-content: center;
							width: 68rpx;
							height: 68rpx;
							margin-right: 30rpx;
							border-radius: 50%;
							background: #4f96ff;
							color: #fff;
						}

						.left_title {
							font-size: 28rpx;
							font-family: all-font;
							font-weight: 400;
							color: #333;
						}

						.left_phone {
							font-size: 24rpx;
							font-family: my-font;
							font-weight: 400;
							color: #888;
						}

						.set_btn {
							font-family: all-font;
						}
					}

					.right_box {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-top: 20rpx;

						.create_time {
							font-size: 24rpx;
							font-family: all-font;
							font-weight: 400;
							color: #999999;
						}

						.create_level {
							font-family: all-font;
						}
					}
				}
			}
		}

		.popup_proportion_box {
			padding: 30rpx;

			.proportion_top {
				font-size: 30rpx;
				font-family: all-font;
				padding-bottom: 30rpx;
				position: relative;
				display: flex;
				.proportion_top_tic {
					color: #4f96ff;
				}
				> view:last-child {
					margin-left: 30rpx;
				}
			}

			.proportion_input_all {
				margin: 40rpx 0 30rpx;
			}
		}

		.no_data {
			color: #ccc;
			font-size: 40rpx;
			font-family: all-font;
			text-align: center;
			padding: 50rpx 0;
		}
	}
}
</style>
